<template>
    <div class="comment_box">
        <img
            :src="user_img"
            alt="" />
        <div>
            <span>{{ user_name }}</span><span>{{ time_str }}</span>
            <div>{{ message }}</div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { get_now_time } from '@/utils/utils.js';
const props = defineProps(["message", "time", "user_img", "user_name"]);
const time_str = computed(() => {
  return get_now_time(props.time); // 例如，将 propValue 乘以 2
});
</script>

<style lang="less" scoped>
.comment_box {
    width: 13.2rem;
    margin: auto;
    padding: 0 0 0.1rem 0;
    display: flex;
    align-items: flex-start;
    border-bottom: 0.01rem dashed @hui_font;

    img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
    }

    div {
        font-size: 0.2rem;

        span {
            display: inline-block;
            height: 0.3rem;
            padding: 0 0.2rem;
            line-height: 0.3rem;
            font-weight: 700;
            color: @qls;
        }

        div {
            text-indent: 0.2rem;
            padding: 0 0.2rem;
            font-size: 0.16rem;
            color: @hui_font;
        }
    }
}
</style>
